<!DOCTYPE html>
<html>
<head>
   <title>CSS Animations - animation events for empty @keyframes rule</title>
   <link rel="author" title="Opera Software ASA" href="http://www.opera.com/">
   <meta name="flags" content="dom">
   <!--
   **************************************************************************
   ISSUE: Spec currently implies that events should be dispatched here, but
          neither Gecko nor WebKit comply
          http://lists.w3.org/Archives/Public/www-style/2011Dec/0144.html
   **************************************************************************
   -->
   <script src="/resources/testharness.js"></script>
   <script src="/resources/testharnessreport.js"></script>
   <style type="text/css">
      @keyframes empty {}
      .test {
         animation: empty 0.2s 2;
      }
   </style>
   <script type="text/javascript">
      setup({explicit_done:true});
      onload = function() {
         var testName = document.querySelector('title').firstChild.data;
         var div = document.querySelector('div');
         var log = document.querySelectorAll('p')[0].firstChild;
         var startOK = true;
         var iterationOK = true;
         var endOK = true;
         function report() {
            clearTimeout(timeout);
            var passed = (startOK && iterationOK && endOK);
            test(function(){assert_true(passed);}, testName);
            done();
            log.data = passed ? 'PASS' : 'FAIL';
         }
         var timeout = setTimeout(report, 1000);
         div.addEventListener('animationstart', function() {
            startOK = false;
            report();
         });
         div.addEventListener('animationiteration', function() {
            iterationOK = false;
            report();
         });
         div.addEventListener('animationend', function() {
            endOK = false;
            report();
         });
         div.className = 'test';
      }
   </script>
   <style>iframe{display:none}</style>
</head>
<body>
   <p>Testing... (JavaScript required)</p>
   <div></div>
</body>
</html>
